<template>
	<uni-drawer ref="deptDrawer" mode="right" :mask-click="true">
			<view class="scroll-view">
				<uni-search-bar
					ref="searchBar"
					v-model = "searchKey"
					radius="15" 
					placeholder="输入部门名称" 
					clearButton="always" 
					cancelButton="always" 
					cancelText = "重置"
					@cancel="ontReset"
					@input="onSearch"/>
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" v-for="(item, index) in listData" :key="item.deptId" @click="deptClick(item)">
						<text> {{ item.deptName }}</text>
					</view>
				</scroll-view>
			</view>
	</uni-drawer>
</template>

<script>
	import { listDept,getDept } from '@/api/system/dept.js'
	export default {
		name: "DeptSelector",
		data() {
			return {
				searchKey: '',
				listData: []
			}
		},
		props: {
			id:{
				type:[Number,Array,String],
			},
		},
		watch:{
			id:{
				async handler(newVal,oldVal){
					if(newVal != oldVal) {
						const res = await getDept(newVal)
						const data = {
							name: res.data.deptName,
							value: res.data.deptId
						}
						this.$emit("change", data)
					}
				},
				deep:true,
				immediate:true
			}
		},
		onReady() {
			
		},
		methods: {
			open() {
				this.listData = []
				this.searchKey= ''
				this.$refs.deptDrawer.open()
				this.onSearch()
			},
			deptClick(item){
				const data = {
					name: item.deptName,
					value: item.deptId
				}
				this.$emit("change", data)
				this.$refs.deptDrawer.close()
			},
			ontReset(){
				this.searchKey = ""
				this.onSearch()
			},
			onSearch(){
				// if(this.searchKey.length === 0 ){
				// 	this.$modal.showToast("请输入部门名称")
				// 	return
				// }
				listDept(this.searchKey).then(res => {
					this.listData = res.data
				})
			}
			

		}
	}
</script>
<style lang="scss" scoped>
.example-body {
	padding: 10px;
}
.scroll-view {
	// padding-top: var(--status-bar-height);
	/* #ifndef APP-NVUE */
	width: 100%;
	height: 100%;
	/* #endif */
	flex:1
}
// 处理抽屉内容滚动
.scroll-view-box {
	flex: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: calc(100vh - 200rpx);
	
}
.info {
	padding: 15px;
	color: #666;
}

.info-text {
	font-size: 14px;
	color: #666;
}
.info-content {
	padding: 5px 15px;
}
.close {
	padding: 10px;
}
</style>

